<!--  <Areas @emitArea="getArea" :ClearSelect="queryForm.ClearSelect" :areaCode="110105"></Areas>  -->
<template>
  <div id="area" :class="AreaClass">
    <el-select v-model="area.pCode" :disabled="disabled" @change="provinceChange">
      <el-option :label="v.name" :value="v.value" :key="v.value" v-for="(v) in provinceList" placeholder="请选择省"></el-option>
    </el-select>
    <el-select v-model="area.cCode" :disabled="disabled" @change="cityChange">
      <el-option :label="v.name" :value="v.value" :key="v.value" v-for="(v) in cityList" placeholder="请选择城市"></el-option>
    </el-select>
    <el-select v-model="area.countyCode" v-if="level === 3" :disabled="disabled" @change="countyChange">
      <el-option :label="v.name" :value="v.value" :key="v.value" v-for="(v) in countyList" placeholder="请选择区县"></el-option>
    </el-select>
  </div>
</template>

<script>
import AreaList from './areaList.json'
export default {
  name: 'areas',
  data () {
    return {
      AreaList: [],
      provinceList: [],
      cityList: [],
      countyList: [],
      area: {
        pCode: '',
        pCodeStr: '',
        cCode: '',
        cCodeStr: '',
        countyCode: '',
        countyCodeStr: ''
      }
    }
  },
  props: {
    areaCode: {
      type: String,
      default () {
        return ''
      }
    },
    AreaClass: {
      type: String,
      default () {
        return ''
      }
    },
    ClearSelect: {
      type: Boolean,
      default () {
        return false
      }
    },
    disabled: {
      type: Boolean,
      default () {
        return false
      }
    },
    level: {
      type: Number,
      default: 3
    },
    Index: {
      type: Number,
      default: 0
    }
  },
  created () {
    this.AreaList = this.turnData()
    this.provinceList = this.turnData(AreaList, true)
  },
  mounted () {
    if (this.areaCode) {
      this.queryCode(this.areaCode)
    }
  },
  watch: {
    'ClearSelect' () {
      this.clearSelect()
    },
    'areaCode' (val) {
      this.queryCode(val)
    }
  },
  methods: {
    turnData (json, noChild) {
      json = json || AreaList
      let Array = []
      for (let name in json) {
        let Obj = {}
        Obj.value = name
        Obj.name = json[name].name || json[name]
        if (!noChild) {
          Obj.child = json[name].child
        }
        Array.push(Obj)
      }
      return Array
    },
    provinceChange () {
      this.cityList = []
      this.countyList = []
      this.area.cCode = ''
      this.area.countyCode = ''
      this.area.pCodeStr = AreaList[this.area.pCode].name
      this.cityList = this.turnData(AreaList[this.area.pCode].child)
      this.emit()
    },
    cityChange () {
      this.countyList = []
      this.area.countyCode = ''
      this.area.cCodeStr = AreaList[this.area.pCode].child[this.area.cCode].name
      this.countyList = this.turnData(AreaList[this.area.pCode].child[this.area.cCode].child)
      this.emit()
    },
    countyChange () {
      this.area.countyCodeStr = AreaList[this.area.pCode].child[this.area.cCode].child[this.area.countyCode]
      this.emit()
    },
    areaInit () {
      this.area.pCodeStr = AreaList[this.area.pCode].name
      this.cityList = this.turnData(AreaList[this.area.pCode].child)
      this.area.cCodeStr = AreaList[this.area.pCode].child[this.area.cCode].name
      this.countyList = this.turnData(AreaList[this.area.pCode].child[this.area.cCode].child)
      if (this.area.countyCode) {
        this.area.cCodeStr = AreaList[this.area.pCode].child[this.area.cCode].name
        this.countyList = this.turnData(AreaList[this.area.pCode].child[this.area.cCode].child)
      }
      this.emit()
    },
    queryCode (code) {
      let that = this
      if (code === '') {
        this.area.pCode = ''
        this.area.cCode = ''
        this.area.countyCode = ''
      } else {
        code = code.toString()
        for (let name1 in AreaList) {
          for (let name2 in AreaList[name1].child) {
            if (name2 === code && this.level === 2) {
              that.area.pCode = name1
              that.area.cCode = name2
              that.areaInit()
            } else {
              for (let name3 in AreaList[name1].child[name2].child) {
                if (name3 === code) {
                  that.area.pCode = name1
                  that.area.cCode = name2
                  that.area.countyCode = name3
                  that.areaInit()
                }
              }
            }
          }
        }
      }
    },
    clearSelect () {
      this.cityList = []
      this.countyList = []
      this.area.pCode = ''
      this.area.cCode = ''
      this.area.countyCode = ''
    },
    emit () {
      this.area.index = this.Index
      this.$emit('emitArea', this.area)
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
